<template>
  <view class="anecdotesBox">
    <!-- 关注 -->
    <concern
      :avatar="props.data.dUser.uAvatar"
      :concern="userInfo.concern"
      :username="props.data.dUser.uName"
    ></concern>

    <!-- 主体内容 -->
    <view @click="toDetali(props.data.dId)">
      <content_show :content="props.data.dContent" :display="true"></content_show>
    </view>

    <!-- 图片展示 -->
    <photo_show :image-list="props.data.dImg.split(',')"></photo_show>

    <!-- 操作栏目 -->
    <operate_show @feedback="feedback"></operate_show>
  </view>
</template>

<!-- 趣事组件 -->
<script lang="ts" setup>
import content_show from '@/components/content_show/content_show.vue'
import photo_show from '@/components/photo_show/photo_show.vue'
import operate_show from '../operate_show/operate_show.vue'
import concern from '../concern/concern.vue'
import { DYNAMIC_DETAIL } from '@/config/constant/index'
import type { ResultPopularContent } from '@/config/data/result'
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue'

//接受父组件传递的值
const props = defineProps<{
  data: ResultPopularContent
}>()


// 自定义组件事件
const emit = defineEmits(['feedback'])

//监听操作选项事件
const feedback = (thing: string | number) => {
  if (thing === '评论') {
    toDetali(DYNAMIC_DETAIL+props.data.dId)
    return
  }
  emit('feedback', thing)
}

//跳转详情
const toDetali = (id: string | number) => {
  let key = DYNAMIC_DETAIL + id
  uni.setStorageSync(key, JSON.stringify(props.data))
  uni.navigateTo({
    url: `/subpkg/dynamic_detail/dynamic_detail?id=${key}`,
  })
}

//临时数据
const imageList = ref([
  'https://www.lyzhnb.top/0c3e069f-07f2-4b82-a2fc-32afe69b038a',
  'https://www.lyzhnb.top/05ae291e-746b-4e11-aadb-54aaf1e36fa0',
  'https://www.lyzhnb.top/baby/3810174388_312448898.jpg',
])
const content = ref(
  'Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。'
)
const userInfo = ref({
  username: '不想说话而已',
  avatar: 'https://www.lyzhnb.top/0c3e069f-07f2-4b82-a2fc-32afe69b038a',
  concern: 0,
})

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.anecdotesBox {
  width: 690rpx;
  padding: 20rpx 0;
  margin: auto;
}
</style>
